feat: form progress bar #334
Conversation
WalkthroughThe update introduces a dynamic progress bar to enhance user experience in the Changes
Thank you for using CodeRabbit. We offer it for free to the OSS community and would appreciate your support in helping us grow. If you find it useful, would you consider giving us a shout-out on your favorite social media? TipsChatThere are 3 ways to chat with CodeRabbit:
Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments. CodeRabbit Commands (invoked as PR comments)
Additionally, you can add CodeRabbit Configration File (
|
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Review Status
Actionable comments generated: 1
Configuration used: CodeRabbit UI
Files selected for processing (1)
- client/components/open/forms/OpenForm.vue (2 hunks)
Additional comments: 1
client/components/open/forms/OpenForm.vue (1)
- 168-176: The
formProgresscomputed property efficiently calculates the completion progress of required fields in the form. It filters required fields, checks for completed fields, and calculates the progress percentage. This logic is clear and concise. However, ensure thatthis.dataFormValue[field.nf_id]accurately reflects the current state of the form inputs, especially for complex input types (e.g., checkboxes, radio buttons) that might not directly map to a simple string value. If there are custom input components or complex data structures, additional handling might be necessary to accurately determine if a field is "completed."
There was a problem hiding this comment.
@madassdev we don't have an option to set form.show_progress_bar to true... And the form Model doesn't have the property. Please make sure to:
- add the property do the DB model
- add the property to the model
- Add validation to userFormRequest
- add the front-end toggle in form editor to enable and disable this
There was a problem hiding this comment.
@madassdev we don't have an option to set form.show_progress_bar to true... And the form Model doesn't have the property. Please make sure to:
- add the property do the DB model
- add the property to the model
- Add validation to userFormRequest
- add the front-end toggle in form editor to enable and disable this
There was a problem hiding this comment.
Review Status
Actionable comments generated: 1
Configuration used: CodeRabbit UI
Files selected for processing (5)
- app/Http/Requests/UserFormRequest.php (1 hunks)
- app/Models/Forms/Form.php (1 hunks)
- client/components/open/forms/OpenForm.vue (2 hunks)
- client/components/open/forms/components/form-components/FormCustomization.vue (1 hunks)
- database/migrations/2024_03_12_173732_show_progress_bar.php (1 hunks)
Additional comments: 4
database/migrations/2024_03_12_173732_show_progress_bar.php (1)
- 1-32: The migration file for adding the
show_progress_barcolumn to theformstable is correctly implemented, following Laravel's best practices. The choice of a boolean type with a default value enhances data integrity, and the inclusion of a down method to reverse the migration is commendable.client/components/open/forms/components/form-components/FormCustomization.vue (1)
- 62-64: The addition of the
toggle-switch-inputcomponent for enabling the "Show progress bar" feature in form customization is well-implemented. It follows the established pattern of using reusable components for form customization options, ensuring a consistent user experience.app/Http/Requests/UserFormRequest.php (1)
- 75-75: The addition of the validation rule for
show_progress_baras a boolean is correctly implemented. It ensures data integrity and proper handling of the attribute in form submissions, following Laravel's validation conventions.app/Models/Forms/Form.php (1)
- 95-95: The addition of the
show_progress_barattribute to the$fillablearray in theFormmodel is correctly implemented. It enables mass assignment for this attribute, following Laravel's best practices for model security and data handling.
| <template v-if='form.show_progress_bar'> | ||
| <div v-if='isIframe' class='mb-4 p-2'> | ||
| <div class='w-full h-2 bg-gray-200 dark:bg-gray-600 relative border rounded-full overflow-hidden'> | ||
| <div class='h-full transition-all duration-300 rounded-r-full' | ||
| :class="{ 'w-0': formProgress === 0 }" | ||
| :style="{ width: formProgress + '%', background: form.color }" | ||
| /> | ||
| </div> | ||
| </div> | ||
| <div v-else class='fixed top-0 left-0 right-0 z-50'> | ||
| <div class='w-full h-[0.2rem] bg-gray-200 dark:bg-gray-600 relative overflow-hidden'> | ||
| <div class='h-full transition-all duration-300' | ||
| :class="{ 'w-0': formProgress === 0 }" | ||
| :style="{ width: formProgress + '%', background: form.color }" | ||
| /> | ||
| </div> | ||
| </div> |
There was a problem hiding this comment.
The implementation of the dynamic progress bar in OpenForm.vue is well-executed, with conditional rendering based on form.show_progress_bar and isIframe. The formProgress computed property correctly calculates the progress percentage, enhancing the user experience by providing visual feedback on form completion status.
However, to improve accessibility for users relying on screen readers, consider adding accessibility attributes such as role="progressbar" and aria-valuenow, aria-valuemin, aria-valuemax to the progress bar elements.
+ <div role="progressbar" aria-valuenow="formProgress" aria-valuemin="0" aria-valuemax="100" class='h-full transition-all duration-300 rounded-r-full'
+ :class="{ 'w-0': formProgress === 0 }"
+ :style="{ width: formProgress + '%', background: form.color }">Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation.
| <template v-if='form.show_progress_bar'> | |
| <div v-if='isIframe' class='mb-4 p-2'> | |
| <div class='w-full h-2 bg-gray-200 dark:bg-gray-600 relative border rounded-full overflow-hidden'> | |
| <div class='h-full transition-all duration-300 rounded-r-full' | |
| :class="{ 'w-0': formProgress === 0 }" | |
| :style="{ width: formProgress + '%', background: form.color }" | |
| /> | |
| </div> | |
| </div> | |
| <div v-else class='fixed top-0 left-0 right-0 z-50'> | |
| <div class='w-full h-[0.2rem] bg-gray-200 dark:bg-gray-600 relative overflow-hidden'> | |
| <div class='h-full transition-all duration-300' | |
| :class="{ 'w-0': formProgress === 0 }" | |
| :style="{ width: formProgress + '%', background: form.color }" | |
| /> | |
| </div> | |
| </div> | |
| <template v-if='form.show_progress_bar'> | |
| <div v-if='isIframe' class='mb-4 p-2'> | |
| <div class='w-full h-2 bg-gray-200 dark:bg-gray-600 relative border rounded-full overflow-hidden'> | |
| <div role="progressbar" aria-valuenow="formProgress" aria-valuemin="0" aria-valuemax="100" class='h-full transition-all duration-300 rounded-r-full' | |
| :class="{ 'w-0': formProgress === 0 }" | |
| :style="{ width: formProgress + '%', background: form.color }"> | |
| </div> | |
| </div> | |
| </div> | |
| <div v-else class='fixed top-0 left-0 right-0 z-50'> | |
| <div class='w-full h-[0.2rem] bg-gray-200 dark:bg-gray-600 relative overflow-hidden'> | |
| <div role="progressbar" aria-valuenow="formProgress" aria-valuemin="0" aria-valuemax="100" class='h-full transition-all duration-300' | |
| :class="{ 'w-0': formProgress === 0 }" | |
| :style="{ width: formProgress + '%', background: form.color }"> | |
| </div> | |
| </div> | |
| </div> |
There was a problem hiding this comment.
Review Status
Actionable comments generated: 0
Configuration used: CodeRabbit UI
Files selected for processing (1)
- database/migrations/2024_03_12_173732_show_progress_bar.php (1 hunks)
Files skipped from review as they are similar to previous changes (1)
- database/migrations/2024_03_12_173732_show_progress_bar.php
There was a problem hiding this comment.
Review Status
Actionable comments generated: 0
Configuration used: CodeRabbit UI
Files selected for processing (1)
- app/Http/Requests/UserFormRequest.php (1 hunks)
Files skipped from review as they are similar to previous changes (1)
- app/Http/Requests/UserFormRequest.php
Summary by CodeRabbit